<template>
  <Input v-model.trim="curModel" :placeholder="placeholder" @on-change="change">
     <a slot="append" @click="yi()">译
        <Dropdown >
          <Icon type="md-arrow-dropdown" />
      <DropdownMenu slot="list">
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
      </DropdownMenu>
    </Dropdown>
     </a>
  </Input>
</template>

<script>
import Api from "@/plugins/request";
export default {
  name:"inputYi",
  model: {
    prop: "value",
    event: "on-change",
  },
  props: {
    value: {
      type: String,
    },
    placeholder: {
      type: String,
    },
  },
  data() {
    return {
      curModel: this.value,
    };
  },
  components: {},
  methods: {
    async yi() {
      let { translateResult } = await Api.get("/api/common/fanyi", {
        i: this.curModel,
      });
      var result = translateResult[0][0]["tgt"];
      var arr = result.split(" ");
      var items = [];
      arr.forEach((u) => {
        var u = u.trim().toLowerCase();
        if (u != "" && u != "the" && u != "of") {
          items.push(u.substr(0, 1).toUpperCase() + u.substr(1));
        }
      });
      this.$emit("on-yi", items.join(""));
    },
    change() {
      this.$emit("on-change", this.curModel);
    },
  },
  watch: {
    value(v) {
      this.curModel = v;
    },
  },
};
</script>

<style style="less">
</style>
